<script setup>
const props = defineProps({
  loadShow: {
    type: Boolean,
    required: true,
    default: false
  }
})
</script>
<template>
  <div class="load-a" v-show="loadShow">
    <div class="load-b"></div>
  </div>
</template>
<style scoped>
.load-a {width: 100%; height: 100%; overflow: hidden; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; position: fixed; background-color: rgba(0, 0, 0, .5);}
.load-b {width: 3em; height: 3em; position: absolute; top: 40%; left: calc(50% - 1.5em); border: 3px solid #CCC; border-top-color: transparent; border-radius: 100%; animation: circle infinite 0.75s linear;}
@keyframes circle {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
}
</style>